<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加预设班级</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>

      <!-- 用户列表区域 -->
        <!-- 内容主体区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef"  width="50%"  border stripe>
          <el-form-item label="班级名称" prop="classes_name">
            <el-input v-model="addForm.classes_name" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="开班课程" prop="course_id">
            <el-select v-model="addForm.course_id" placeholder="开班课程">
              <el-option
                v-for="item in coursenameList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="startweek">
            <el-input v-model="addForm.startweek" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="结束时间" prop="endweek">
            <el-input v-model="addForm.endweek" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="任课教师" prop="teacher_id">
            <el-select v-model="addForm.teacher_id" placeholder="任课教师">
              <el-option
                v-for="item in teacherList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人数限制" prop="maxNum">
            <el-input v-model="addForm.maxNum" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="晚餐费(元)" prop="truefee">
            <el-input v-model="addForm.truefee" style="width: 200px"></el-input>
          </el-form-item>

        </el-form>

        <!-- 底部区域 -->
      <el-row :gutter="20" >
        <el-col :span="4" >
          <el-button type="primary" @click="addClass()">添加预设班级</el-button>
        </el-col>
      </el-row>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                addForm: {
                    classes_name: '',
                    course_id: '',
                    teacher_id: '',
                    startweek: '',
                    endweek: '',
                    maxNum:'',
                    truefee:''
                },
                // 添加表单的验证规则对象
                addFormRules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '用户名的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                        {
                            min: 6,
                            max: 15,
                            message: '用户名的长度在6~15个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    email: {
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    },
                    mobile: {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                },
                teacherList:[],
                coursenameList:[]
            }
        },
        created() {
            this.getTeacherList()
            this.getcoursenameList()
        },
        methods: {

            async getcoursenameList() {
              const { data: res } = await this.$http.get('course/name')

              if (res.code !== 200) {
                  return this.$message.error('获取用户列表失败！')
              }
              this.coursenameList = res.data
            },
            async getTeacherList() {
              const { data: res } = await this.$http.get('teacher/name')

              if (res.code !== 200) {
                  return this.$message.error('获取用户列表失败！')
              }
              this.teacherList = res.data
            },
            // 点击按钮，添加新用户
            addClass() {
                this.$refs.addFormRef.validate(async valid => {
                  console.log(this.addForm)
                  let from = new FormData()
                  from.append('classes_name',this.addForm.classes_name)
                  from.append('course_id',this.addForm.course_id)
                  from.append('teacher_id',this.addForm.teacher_id)
                  from.append('startweek',this.addForm.startweek)
                  from.append('endweek',this.addForm.endweek)
                  from.append('maxNum',this.addForm.maxNum)
                  from.append('truefee',this.addForm.truefee)

                    if (!valid) return
                    const { data: res } = await this.$http.post('classes/',from)

                            if (res.code !== 200) {
                              this.$message.error('预设班级失败！')
                            }

                    this.$message.success('预设班级成功！')
                })
            },

        }
    }
</script>

<style lang="less" scoped>
  .el-col {
    margin-top: 30px;
    float:right;
  }
</style>
